import React, { FC, useEffect } from 'react'
import styles from './QuestionCard.module.css'

type PropsType = {
    id: string
    title: string
    isPublished: boolean
    deleteQuestion?: (id: string) => void // void代表函数返回值为空
    publishQuestion?: (id: string) => void
}
const QuestionCard: FC<PropsType> = props => {
    const { id, title, isPublished, deleteQuestion, publishQuestion } = props
    function publish(id: string) {
        publishQuestion && publishQuestion(id)
    }

    function del(id: string) {
        deleteQuestion && deleteQuestion(id)
    }
    // useEffect(() => {
    //     console.log('等价于生命周期中的mounted会执行的函数内容')
    //     return () => {
    //         console.log('等价于生命周期中的Unmounted会执行的函数内容') // 销毁
    //     }
    // }, [])
    return (
        <>
            <div key={id} className={styles['card-item']}>
                <strong>{title}</strong>
                &nbsp;
                {/* 判断 */}
                {isPublished ? <span style={{ color: 'green' }}>已发布</span> : <span>未发布</span>}
                <button
                    onClick={() => {
                        publish(id)
                    }}
                >
                    发布问卷
                </button>
                <button
                    onClick={() => {
                        del(id)
                    }}
                >
                    删除问卷
                </button>
            </div>
        </>
    )
}

export default QuestionCard
